<template>
  <div class="lesson-list">
    <scroll-container ref="scrollContainer">
      <multiList @scrollTo="scrollTo" :groupDatas="groupData" :groupOffset="1" :head="head">
        <div class="intro">
          <div
            v-for="(item,index) in groupData.dataArr[0].data"
            :key="index"
            :class="[{nav_foc:groupData.focArr[0][index]}]"
            :data-index="'tar_1_'+index"
          >
            <img :src="item.cover" alt>
          </div>
        </div>
        <imglist_w312 :groupData="groupData.dataArr[1]" :focArr="groupData.focArr[1]" :group="2"></imglist_w312>
      </multiList>
    </scroll-container>
  </div>
</template>
<script>
import scrollContainer from "@/components/base/scroll-container/scroll-container";
import multiList from "@/components/base/multi-list/multi-list";
import imglist_w312 from "../ImgList_w312";
export default {
  components: {
    scrollContainer,
    multiList,
    imglist_w312
  },
  props: ["groupData"],
  methods: {
    scrollTo(targetIndex) {
      this.$refs.scrollContainer.scrollTo(targetIndex);
    }
  },
  data() {
    return {
      groups: [1],
      scrollY: 0,
      head: {
        left: "0-0"
      }
    };
  }
};
</script>
<style lang="less" scoped>
.lesson-list {
  margin-top: 184px;
  margin-left: -48px;
  width: 1700px;
  overflow: hidden;
  .intro {
    display: flex;
    padding-left: 19px;
    padding-top: 20px;
    div {
      margin-left: 48px;
      width: 672px;
      height: 270px;
      overflow: hidden;
      border-radius: 8px;
      img {
        width: 672px;
        height: 270px;
      }
    }
    .nav_foc {
      border: 2px solid #ffffff;
      border-radius: 8px;
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
    }
  }
  .content {
    height: 901px;
    overflow: hidden;
  }
}
</style>
